<template>
  <el-row type="flex" justify="center" align="middle" class="wrapper">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="手机号">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
       <el-form-item label="密码">
        <el-input v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
        <el-button @click="cancle">重置</el-button>
      </el-form-item>
    </el-form>
  </el-row>
</template>
<script>
export default {
    data(){
        return{
            form:{
                username:'',
                password:''
            }
        }
    },
    methods:{
    cancle(){
        this.form={
             username:'',
             password:''
        }
    },
    login(){
        this.$axios({
            url:'/login',
            method:'post',
            data:this.form
        }).then(res=>{
            if(res.data.message=='登录成功'){
            localStorage.setItem('token',res.data.data.token)
            localStorage.setItem("userInfo",JSON.stringify(res.data.data.user))
            this.$message('登录成功');  
            this.$router.push('/')
             }
            else{
                console.log(res);
                this.$message(res.data.message)
            }
            
        })
    }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
  height: 100vh;
  background: url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1599190450369&di=0d0ecbd9dd1558ef818d69d03ff56656&imgtype=0&src=http%3A%2F%2Fimg.pptjia.com%2Fimage%2F20190108%2F9ec44adb1dde6b9113c773744c6b5e9f.jpg');
}
</style>